<template>
    <view class="gjl-view">
        <view class="bg-box">
            <view class="img-box">
                <image src="https://img.thumbrary.com/bookStoreBaogao.png" mode=""></image>
            </view>
        </view>
        <view class="main">
            <view class="card-box">
                <view class="card-inner">
                    <view class="user-box">
                        <view class="user-img">
                            <image :src="userInfo.avatarUrl" mode=""></image>
                        </view>
                        <view class="user-name">
                            {{userInfo.nickName}}
                        </view>
                    </view>
                    <view class="tip-tag">
                        <view class="dot"></view>
                        <view class="text">{{time | format('yy年m月')}}份阅读报告</view>
                        <view class="dot"></view>
                    </view>
                    <view class="tip">
                        拇指宫殿制作
                    </view>
                </view>
            </view>
            <view class="btn-box" @click="$routerTo({path: '/pagesMine/bookstore/baogaoOpen'})">
                <view class="btn-text">
                    生成阅读报告>>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import utils from '@/util/index.js'
    import { mapGetters } from 'vuex'
    export default {
        filters: {
            format(val,format){
                return utils.format(val,format)
            }
        },
        data(){
            return {
                time: ''
            }
        },
        computed: {
            ...mapGetters(['userInfo'])
        },
        methods:{
            // 获取当前时间
            getDate(){
                this.time = new Date().getTime()/1000
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view{
        min-height: 100%;
        background:rgba(69,91,245,1);
        overflow: hidden;
        .main{
            position: relative;
            z-index: 2;
            margin: 0 30rpx;
            .btn-box{
                position: fixed;
                bottom: 100rpx;
                width: 690rpx;
                background:rgba(255,255,255,1);
                border-radius:67rpx;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100rpx;
                .btn-text{
                    font-size:32rpx;
                    font-weight:bold;
                    color:rgba(69,91,245,1);
                }
            }
            .card-box{
                position: relative;
                padding: 37rpx 40rpx 49rpx;
                margin-top: 100rpx;
                background:rgba(255,255,255,1);
                border-radius:20rpx;
                .tip{
                    position: absolute;
                    top: 42rpx;
                    right: 0;
                    display: flex;
                    align-items: center;
                    background:linear-gradient(122deg,rgba(255,180,68,1) 0%,rgba(252,87,98,1) 100%);
                    border-radius:40rpx 0px 0px 40rpx;
                    padding: 9rpx 32rpx;
                    font-size:28rpx;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                }
                .tip-tag{
                    height:87rpx;
                    background:rgba(43,168,252,1);
                    border-radius:20rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 29rpx auto 0;
                    padding: 0 40rpx;
                    .dot{
                        width:12rpx;
                        height:12rpx;
                        background:rgba(255,255,255,1);
                        border-radius:50%;
                    }
                    .text{
                        font-size:32rpx;
                        font-weight:400;
                        color:rgba(255,255,255,1);
                    }
                }
                .user-box{
                    display: flex;
                    align-items: center;
                    .user-name{
                        margin-left: 29rpx;
                        font-size:32rpx;
                        font-weight:400;
                        color:rgba(51,51,51,1);
                    }
                    .user-img{
                        display: flex;
                        image{
                            width:104rpx;
                            height:104rpx;
                            background:rgba(199,199,199,1);
                            border-radius:50%;
                        }
                    }
                }
            }
        }
        .bg-box{
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            .img-box{
                display: flex;
                image{
                    width: 750rpx;
                    height: 942rpx;
                }
            }
        }
    }
</style>